<template>
	<view class="root-wrap">
		<view class="tab-bar">
			<u-tabs
				:current="navIndex" 
				:list="navList" 
				@click="clickNav" 
				lineWidth="120rpx" 
				lineHeight="8rpx"
				lineColor="#30D6C2"
				:activeStyle="{
					color: '#303133',
					fontSize: '32rpx',
					fontWeight: '500'
				}"
				:inactiveStyle="{
					color: '#303133',
					fontSize: '32rpx',
					fontWeight: '500'
				}"></u-tabs>
		</view>
		<view v-if="navIndex==0" class="list-wrap">
			<u-list
				v-if="dataList.length>0"
				@scrolltolower="scrollToLower"
			>
				<u-list-item
					v-for="(item, index) in dataList"
					:key="index"
				>
					<view class="item" @click="goDetail(item.id)">
						<view class="title-wrap">{{item.bid_name}}</view>
						<view class="info-wrap">
							<image class="logo" :src="item.bid_image" mode="aspectFill"></image>
							<view class="info">
								<view class="status-wrap">
									<view v-if="item.bid_status=='报价期'" class="status status-0">{{item.bid_status}}</view>
									<view v-if="item.bid_status=='评选期'" class="status status-1">{{item.bid_status}}</view>
									<view v-if="item.bid_status=='中选'" class="status status-2">{{item.bid_status}}</view>
									<view v-if="item.bid_status=='落选'" class="status status-3">{{item.bid_status}}</view>
									<view class="detail">查看详情</view>
								</view>
								<view class="time start">
									<text class="label">发布时间：</text>
									<text class="date">{{formatTime(item.createtime)}}</text>
								</view><view class="time start">
									<text class="label">截止时间：</text>
									<text class="date">{{formatTime(item.endtime)}}</text>
								</view>
							</view>
						</view>
						<view class="groups">
							<text class="title">当前{{item.quotes.length}}家参与报价：</text>
							<view v-if="item.quotes.length>0" class="group-logo">
								<view v-for="logo,i in item.quotes" class="logo-wrap" :key="i" :style="'z-index: '+(i+1)+';'"><image :src="logo.logo_image"></image></view>
							</view>
							<view v-else class="group-logo">
								<view class="logo-wrap"><image src="../../static/assets/imgs/group-empty.png"></image></view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			
			<view v-else class="empty-data">
				<image src="../../static/assets/imgs/page-no-data.png" mode="aspectFill"></image>
			</view>
		</view>
		<view v-if="navIndex==1" class="list-wrap">
			<u-list
				v-if="historyList.length>0"
				@scrolltolower="historyScrollToLower"
			>
				<u-list-item
					v-for="(item, index) in historyList"
					:key="index"
				>
					<view class="item" @click="goDetail(item.id)">
						<view class="title-wrap">{{item.bid_name}}</view>
						<view class="info-wrap">
							<image class="logo" :src="item.bid_image" mode="aspectFill"></image>
							<view class="info">
								<view class="status-wrap">
									<view v-if="item.bid_status=='报价期'" class="status status-0">{{item.bid_status}}</view>
									<view v-if="item.bid_status=='评选期'" class="status status-1">{{item.bid_status}}</view>
									<view v-if="item.bid_status=='中选'" class="status status-2">{{item.bid_status}}</view>
									<view v-if="item.bid_status=='落选'" class="status status-3">{{item.bid_status}}</view>
									<view class="detail">查看详情</view>
								</view>
								<view class="time start">
									<text class="label">发布时间：</text>
									<text class="date">{{formatTime(item.createtime)}}</text>
								</view><view class="time start">
									<text class="label">截止时间：</text>
									<text class="date">{{formatTime(item.endtime)}}</text>
								</view>
							</view>
						</view>
						<view class="groups">
							<text class="title">当前{{item.quotes.length}}家参与报价：</text>
							<view v-if="index!=1" class="group-logo">
								<view v-for="logo,i in item.quotes" class="logo-wrap" :key="i" :style="'z-index: '+(i+1)+';'"><image :src="logo.logo_image"></image></view>
							</view>
							<view v-else class="group-logo">
								<view class="logo-wrap"><image src="../../static/assets/imgs/group-empty.png"></image></view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view v-else class="empty-data">
				<image src="../../static/assets/imgs/page-no-data.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '../../util/index.js';
	import { getProgramList } from '@/api/program.js';
	export default {
		data() {
			return {
				navList:[
					{name:'报价中（0）'},
					{name:'历史项目（0）'}
				],
				navIndex: 0,
				dataList: [],
				historyList: [],
				page: 1,
				list_rows: 10,
				noMoreData: false,
				historyPage: 1,
				historyListRows: 10,
				historyNoMoreData: false
			};
		},
		onLoad(){
			this.getCurrentList();
			this.getHistoryList();
		},
		onShareAppMessage() {
		    return {
		      title: 'HSC报修比价', // 分享标题
		      path: '/pages/program/index', // 分享路径，必须是已经定义过的页面路径
		      success: function () {
		        // 分享成功回调
				uni.showToast({
					title: '分享成功',
					icon: 'none'
				})
		      },
		      fail: function () {
		        // 分享失败回调
		      }
		    };
		},
		onShareTimeline() {
			return {
				title: 'HSC报修比价', // 分享标题
				path: '/pages/program/index', // 分享路径，必须是已经定义过的页面路径
				success: function () {
				  // 分享成功回调
				  uni.showToast({
				  	title: '分享成功',
					icon: 'none'
				  })
				},
				fail: function () {
				  // 分享失败回调
				}
			};
		},
		methods:{
			formatTime(time){
				return utils.formatTime(time);
			},
			getCurrentList(){
				let that = this;
				const params = {
					page: this.page,
					list_rows: this.list_rows,
					type: 'current'
				}
				getProgramList(params).then((res)=>{
					if (1 == res.code) {
						this.navList[0].name = `报价中（${res.data.total}）`;
						that.dataList = [...that.dataList,...res.data.data];	
						that.noMoreData = that.dataList.length>=res.data.total;
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			getHistoryList(){
				let that = this;
				const params = {
					page: this.historyPage,
					list_rows: this.historyListRows,
					type: 'history'
				}
				getProgramList(params).then((res)=>{
					if (1 == res.code) {
						this.navList[1].name = `历史项目（${res.data.total}）`;
						that.historyList = [...that.historyList,...res.data.data];	
						that.historyNoMoreData = that.historyList.length>=res.data.total;
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			scrollToLower() {
				if(this.noMoreData) return;
				this.page = this.page+1;
				this.getCurrentList()
			},
			historyScrollToLower(){
				if(this.historyNoMoreData) return;
				this.historyPage = this.historyPage+1;
				this.getHistoryList()
			},
			goDetail(id){
				uni.navigateTo({
					url: '/pages/program/detail?id='+id
				})
			},
			clickNav(e){
				this.navIndex = e.index;
			}
		}
	}
</script>

<style lang="scss">
	.root-wrap{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		.tab-bar{
			margin-top: 20rpx;
		}
		.list-wrap{
			flex: 1;
			overflow-y: auto;
			.item{
				box-sizing: border-box;
				width: 702rpx;
				height: 360rpx;
				margin: 24rpx 24rpx 0;
				padding: 0 24rpx 24rpx;
				background-color: #F3F4F6;
				border-radius: 8rpx;
				.title-wrap{
					box-sizing: border-box;
					width: 100%;
					font-weight: 500;
					font-size: 32rpx;
					color: #303133;
					padding: 24rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					border-bottom: 2rpx solid #DFDFE0;
					overflow: hidden;
				}
				.info-wrap{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin: 24rpx 0;
					.logo{
						width: 156rpx;
						min-width: 156rpx;
						height: 156rpx;
						margin-right: 22rpx;
						border-radius: 8rpx;
						overflow: hidden;
					}
					.info{
						flex: 1;
						height: 156rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						.status-wrap{
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
							.status{
								width: 100rpx;
								height: 44rpx;
								font-size: 24rpx;
								color: #F3F4F6;
								text-align: center;
								line-height: 44rpx;
								background-color: #30D6C2;
								border-radius: 22rpx;
							}
							.status-1{
								background-color: #1FA293;
							}
							.status-2{
								background-color: #D1268D;
							}
							.status-3{
								background-color: #616363;
							}
							.status-over{
								background-color: #0A453E;
							}
							.detail{
								font-size: 24rpx;
								color: #909399;
							}
						}
						.time{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							.label{
								font-size: 24rpx;
								color: #606266;
								text-align: left;
							}
							.date{
								font-size: 28rpx;
								color: #606266;
								text-align: left;
							}
						}
					}
					
				}
				.groups{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 0;
					.title{
						font-size: 24rpx;
						color: #606266;
						white-space: nowrap;
					}
					.group-logo{
						flex: 1;
						margin-left: 22rpx;
						.logo-wrap{
							position: relative;
							box-sizing: border-box;
							display: inline-block;
							width: 44rpx;
							height: 44rpx;
							margin-left: -22rpx;
							overflow: hidden;
							border: 2rpx solid #fff;
							border-radius: 50%;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
			.u-list-item:last-of-type{
				margin-bottom: 200rpx;
			}
		}
		.empty-data{
			width: 424rpx;
			height: 424rpx;
			margin:  300rpx auto;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
